<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style>
       html,body {overflow:hidden;} 
       body,div,ul,li {margin:0;padding:0;}
       #box ul {width:768px;height:172px;list-style-type:none;margin:10px auto;}
       #box li {float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;}
       #box li.active {border:1px solid #a10000;}

       #box li img {width:170px;height:170px;vertical-align:top;}

       #big {position:absolute;width:170px;height:170px;border:2px solid #ddd;display:none;}
       #big div {position:absolute;top:0;left:0;width:170px;height:170px;opacity:0.5;filter:alpha(opactity=50);}
    </style>
    <script>
        window.onload = function() {
            var aLi = document.getElementsByTagName("li");
            var oBig = document.getElementById("big");
            var oLoading = oBig.getElementsByTagName("div")[0];
            var i = 0;
            for (i=0;i<aLi.length;i++) {
                aLi[i].index = i;
                //鼠标滑过，预加载图片插入容器并显示
                aLi[i].onmouseover = function() {
                    //创建一个img元素对象
                    var oImg = document.createElement("img");
                    //图片预加载
                    var img = new Image();
                    img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
                    //插入大图片
                    oBig.appendChild(oImg);
                    //鼠标移过样式
                    this.className = "active";
                    //显示big
                    oBig.style.display = oLoading.style.display = "block";
                    //判断大图是否加载成功
                    img.complete ? oLoading.style.display ="none" : (oImg.onload = function() {oLoading.style.display=""})
                }

                //鼠标移动，大图容器跟随鼠标移动
                aLi[i].onmousemove = function(ev) {
                    var event = ev || window.event;
                    var iWidth = document.documentElement.offsetWidth - event.clientX;
                    //设置big的top值；
                    oBig.style.top = event.clientY + 20 + "px";
                    //设置big的left值，如果右侧显示区域不够，大图将在鼠标左侧显示
                    oBig.style.left = (iWidth < oBig.offsetWidth +10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX +10) + "px"
                }

                //鼠标离开，删除大图并隐藏大图容器
                aLi[i].onmouseout = function() {
                    this.className = "";
                    oBig.style.display = "none";
                    //移除大图片
                    oBig.removeChild(oBig.lastChild);
                }
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
        </ul>
    </div>
    <div id="big"><div></div></div>
</body>
</html>